<script lang="js" setup>
    import TopHeader from '../components/TopHeader.vue';
    import Map from '../components/Map.vue';
</script>
<template>
    <!--整个可视化的容器-->
   <div class="data-view">
        <!--全屏容器使用datav的组件-->
        <dv-full-screen-container>
            <!--头部标题组件-->
            <div class="top-header">
                <TopHeader></TopHeader>
            </div>
            <!--数据分析模块-->
            <div >
               <!--第1,2行-->
                    <div class="row1">
                        <div class="col1">
                            <dv-border-box-1>
                                <Map></Map>
                            </dv-border-box-1>
                        </div>
                        <div class="col2">
                            <dv-border-box-1></dv-border-box-1>
                        </div>
                    </div>
                <!--第三行-->
                    <div class="row2">
                        <div class="col1">
                            <dv-border-box-1></dv-border-box-1>
                        </div>
                        <div class="col2">
                            <dv-border-box-1></dv-border-box-1>
                        </div>
                    </div>
                </div>
        </dv-full-screen-container>
   </div>
</template>
<style lang="css">
   /*整个可视化容器的设置*/
    .data-view{
        width: 100vw;
        height: 100vh;
        background-color:black;
        color:#fff;
        position: absolute;
        top:0;
        left:0;
    }
    /**全屏容器样式的设置 */
    #dv-full-screen-container{
        background-image: url('../assets/imgs/BackGround.png');
        background-size: 100% 100%;
        box-shadow: 0 0 3px;
    }
    /**头部组件的设置 */
    .top-header{
        width: 100%;
        height: 100px;
        
    }
    .row1,.row2,.col1.col2{
        width: 100%;
        height: 100%;
        display: flex;
        flex: 1;
    }
    .row1{
        width: 100%;
        height: 665px;
        flex-direction: row;
        justify-content: space-between;
    }
    .row2{
        width: 100%;
        height: 300px;
        flex-direction: row;
        justify-content: space-between;
    }
   .col1{
        height: 100%;
        width: 66.6%;
        flex-direction: column;
        align-items: center;
   }
   .col2{
        height: 100%;
        width: 33.3%;
        flex-direction: column;
        align-items: center;
   }
</style>